Drop Shadows

You can apply drop shadows to HTML elements through the box-shadow and text-shadow properties. The syntax for both shadow properties is roughly the same, except for the fact that text-shadow does not allow the optional inset keyword. Older versions of the text specification limited text-shadows to three values (no spread) and is the form of the syntax that is widely used.

Here is the typical syntax for creating a box-shadow:

box-shadow: 5px 5px 5px 10px black;

The first value is the horizontal offset, the second value is the vertical offset, the third value is the blur radius, the fourth value is the spread (or size) of the shadow, and the last value is the color. Adding the optional inset keyword to box-shadow will convert the shadow to an inner shadow.

More information about both shadow properties can be found in the CSS Text Level 3 Specification and the CSS Backgrounds and Borders Module Level 3 Specification.